<script lang="ts" setup>
import Header from "@/layouts/admin/Header.vue"
import Aside from "@/layouts/admin/Aside.vue"
import Main from "@/layouts/admin/Main.vue"
import Footer from "@/layouts/admin/Footer.vue"
import { useResponsiveLayoutStore } from "@/store/responsiveLayout"

const store = useResponsiveLayoutStore()
</script>

<template>
  <t-space class="t-space" direction="vertical">
      <t-layout>
        <t-aside v-if="store.showType==='aside'" :width="store.asideWidth" class="aside_container">
          <Aside :isCollapsed="store.isCollapsed"/>
        </t-aside>
        <t-layout style="overflow: hidden">
          <t-header>
            <Header :collapsed="store.isCollapsed"/>
          </t-header>
          <t-content class="content">
            <t-drawer
                v-if="store.showType==='drawer'"
                v-model:visible="store.open"
                :footer="false"
                header
                placement="left"
                showInAttachedElement
                showOverlay
                size="200">
              <Aside/>
            </t-drawer>
              <Main/>
          </t-content>
          <t-footer class="footer">
            <Footer/>
          </t-footer>
        </t-layout>
      </t-layout>
  </t-space>
</template>

<style lang="less" scoped>
@header-height: var(--td-comp-size-xxl);
@content-height: calc(100vh - @header-height * 2);
@footer-height: @header-height;
@main-padding: 10px;
.t-space {
  width: 100vw;
  height: 100vh;

  .aside_container {
    background: var(--td-gray-color-13);
    flex-grow: 0;
    flex-shrink: 0;
    height: 100vh;
  }

  .content {
    height: @content-height;
    padding: @main-padding;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .footer {
    height: @footer-height;
    padding: 0;
    background-color: var(--td-bg-color-container);
  }
}
</style>


